<template>
  <div class="form-container-card">
    <div class="form-content-box">
      <!--卡片头部-->
      <div class="form-header-box">
        <logo/>
      </div>
      <!--表单部分-->
      <div class="form-content-card">
        <slot name="form"></slot>
        <!--表单卡片底部-->
        <div class="form-footer-card big-button">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/style/common/button.css";
import Logo from "@/components/common/Logo";

export default {
  name: "AuthFormCard",
  components: {Logo}
};
</script>

<style scoped>
@media screen and (max-width: 900px){
  .form-container-card{
    width: 100vw!important;
    height: 100%!important;
    border-radius: 0!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
  }
  .form-content-box {
    padding: 0 20px!important;
  }
  :deep(.el-form-item){
    margin-bottom: 10px!important;
  }
}
.form-content-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 50px;
}

.form-header-box {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

/*表单卡片容器*/
.form-container-card {
  display: flex;
  flex-wrap: wrap;
  background: rgb(254, 254, 254);
  min-width: 200px;
  max-width: 400px;
  height: auto;
  padding: 30px 20px;
  border-radius: 50px;
  box-shadow: 2px 2px 15px grey;
}

/*解决一下输入框抖动*/
.form-content-card {
  width: 100%;
}

/*表单底部*/
.form-footer-card {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

:deep(.el-form-item__label) {
  font-size: 15px;
  font-weight: bold;
}

:deep(.el-button) {
  border-radius: 25px!important;
  padding: 25px 130px !important;
  margin: 5px 0;
}

</style>